<template>
  <div class="wrap">
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft"/>
      <main>
          <div class="map">
              <p class="circle"></p>
              <p class="circle"></p>
              <p class="circle"></p>
              <p class="circle"></p>
              <van-image width="40" height="40" fit="cover" :src="item.coverImg" alt="" v-for="(item,i) in products" :key="i"/>
          </div>
          <van-cell>
                <span @click="showPopup">查看更多</span>
                <van-icon @click="showPopup" size="20px" style="float:right;" name="arrow" />
               <div class="line"></div>
            <div class="one-shop" v-for="(item,i) in product" :key="i">
                <img  class="logo" :src="item.coverImg" alt="">
            <div class="detail">
                <h2>{{item.name}}</h2>
                <p>
                    <span>月售{{item.quantity}}</span>
                    <span>{{item.price*20}}分钟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.price}}km</span>
                </p>
                <p><span>起送￥{{(item.quantity)/100}}</span><span>配送￥2</span></p>
                <p><span><van-icon name="shop-collect-o" /></span><router-link tag="span" :to="`/superm_shop/${shops[0].id}`" >进店</router-link></p>
            </div>
        </div> 
          </van-cell>
         <van-action-sheet v-model="show" title="店铺">
            <div class="one-shop" v-for="(item,i) in products" :key="i">
                <img  class="logo" :src="item.coverImg" alt="">
            <div class="detail">
                <h2>{{item.name}}</h2>
                <p>
                    <span>月售{{item.quantity}}</span>
                    <span>{{item.price*20}}分钟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.price}}km</span>
                </p>
                <p><span>起送￥{{item.quantity/100}}</span><span>配送￥2</span></p>
                <p><span><van-icon name="shop-collect-o" /></span><router-link tag="span" :to="`/superm_shop/${shops[0].id}`" >进店</router-link></p>
            </div>
        </div> 
        </van-action-sheet>
      </main>
  </div>
</template>

<script>
import * as api from '@/api/getProlist'
export default {
    name:'Selftake',
    data(){
        return{
            show:false,
            product:'',
            products:[],
            shops:[],
            shopsAll:[]
        }
    },
    methods: {
    showPopup() {
      this.show = true;
    },
    tap(){
        this.$router.go(-1)
    },
    onClickLeft() {
      this.$router.go(-1)
    },
  },
  mounted(){
        api.getProlist({product_category:this.$route.params.id,per:2}).then(data=>{
            console.log(data.data.products)
            this.product=data.data.products
        })
        api.getProlist({product_category:this.$route.params.id,per:7}).then(data=>{
            console.log(data.data.products)
            this.products=data.data.products
        })
  },
  beforeMount(){
        this.shops.push(this.$store.state.shops[6])
        this.shops.push(this.$store.state.shops[5])
        this.shopsAll = this.$store.state.shops
  }
}
</script>

<style scoped>
.map{
    width:100%;
    min-height:425px;
    box-sizing: border-box;
    background:url(../images/map.jpg) no-repeat;
    background-size:100%;
    background-position: -10px;
    position: relative;
}
.map .circle{
    width:80px;height:80px;
    background:rgba(0, 174, 255, 0.726);
    border-radius:100%;
    position: absolute;
    left:0;right:0;top:0;bottom:0;
    margin:auto;
    z-index:100;
    animation-name: pulse;
    animation-iteration-count:infinite;
    animation-duration: 10s;
    animation-delay: .15s;
}
.map .circle:nth-of-type(2){
    width:160px;height:160px;
    background:rgba(0, 140, 255, 0.253);
    z-index:90;
    animation-delay: .3s;
}
.map .circle:nth-of-type(3){
    width:280px;height:280px;
    background:rgba(0, 174, 255, 0.123);    
    z-index:80;
    animation-delay: .45s;
}
.map .circle:nth-of-type(4){
    width:25px;height:25px;
    background:rgb(0, 183, 255);    
    z-index:111;
}
@keyframes flash {
    0%,
    100%,
    50% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}
@keyframes pulse {
    0% {
        transform: scale3d(1,1,1);
        opacity: 1;
    }
    50% {
        transform: scale3d(1.1,1.1,1.1);
        opacity: 0.5;
    }
    100% {
        transform: scale3d(1.3,1.3,1.3);
        opacity: 0;
    }
}
.van-image >>> img{
    border-radius:10px; 
}
.van-image{
    z-index:120;
    position: absolute;
    left:0;right:0;top:0;bottom:0;
    margin:auto;
    animation-name: flash;
    animation-iteration-count:infinite;
    animation-duration: 4s;
}
.van-image:nth-of-type(1){
    left:240px;
}
.van-image:nth-of-type(2){
    left:120px;
    top:150px;
    animation-delay: .5s;
}
.van-image:nth-of-type(3){
    left:80px;
    top:-200px;
    animation-delay: .8s;
}
.van-image:nth-of-type(4){
    left:140px;
    top:-90px;
    animation-delay: 1s;
}
.van-image:nth-of-type(5){
    left:-160px;
    top:-80px;
    animation-delay: 1.6s;
}
.van-image:nth-of-type(6){
    left:-120px;
    top:240px;
    animation-delay: 1.4s;
}
.van-image:nth-of-type(7){
    left:-200px;
    top:60px;
    animation-delay: 1.8s;
}

.wrap{
    display:flex;
    flex-direction: column;
    height:100vh;
    position:relative;
}
main{
    flex:1;
    position: relative; 
    background: #eee;
}
main circle{
    position: absolute;
    left: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #eee;
    padding: 3px;
    box-sizing: border-box;
}
main p .van-icon{
    font-size: 26px;   
}
main .van-cell{
    bottom:0px;
    left: 0;
    position:absolute;
}
main .one-shop{
    display: flex;
    padding: 15px 0 12px 0;
    box-sizing: border-box;
    margin-bottom: 17px;
    border-top: 1px solid #eee;
    margin-top:10px;
}
main .one-shop .logo{
    width: 64px;
    height: 64px;
    background: #74BA42;
    border-radius: 10px;
    margin-right:10px 
    
}
.one-shop .detail{
    box-sizing: border-box;
    padding-bottom: 5px;
 } 
 .detail h2{
    font-size: 16px;
    line-height: 22px;
    color: #333
} 

.detail p:nth-of-type(1){
    display: flex;
    
}  
 .detail p span{
    color: #666
}
 .detail p:nth-of-type(1) span:nth-child(1){
    display: block;
    font-size: 12px;
    line-height: 17px;
} 
.detail p:nth-of-type(1) span:nth-child(2){
    display: block;
    font-size: 10px;
    line-height: 14px;
    margin-left: 100px;
}
.detail p:nth-of-type(2){
    display: flex;
    font-size:12px;
}

 .detail p:nth-of-type(2) span:nth-child(1){
    display: block;
    font-size: 12px;
    margin-right: 20px;
    display: flex
}
 .detail p:nth-of-type(3) {
    box-sizing: border-box;
    display: flex
}
 .detail p:nth-of-type(3) span:nth-child(1) .van-icon{
    font-size: 18px;
    margin-right: 10px;
    padding-top: 5px;
    color: red
}
.detail p:nth-of-type(3) span:nth-child(1){
    font-size:12px;
}
.detail p:nth-of-type(3) span:nth-child(2){
    font-size:12px;
    margin-left: 140px;
    display: block;
    color: #fff;
    border-radius: 21px;
    background: #66B32E;
    padding: 2px 13px;
    text-align: center
} 
.van-action-sheet .one-shop {
    margin-left: 15px;
}
.van-action-sheet .one-shop .logo{
    margin-right: 10px
}
.van-action-sheet__header{
    position:fixed;
    width:100%;
    height:40px;
    background:#fff;
    border-radius:20px 20px 0 0 ;
    z-index:1000;
}
.van-action-sheet__content{
    margin-top:40px;
}
</style>